<template>
  <el-card style="height: 586px">
    <el-carousel indicator-position="outside" style="height: 350px">
      <el-carousel-item>
        <img src="https://2023-08-02first-use-oss.oss-cn-chengdu.aliyuncs.com/363bca217e89472e87a615a4f8ff5b94.jpg" alt="Image 1" style="width: 1400px; height: 300px">
      </el-carousel-item>
      <el-carousel-item>
        <img src="https://2023-08-02first-use-oss.oss-cn-chengdu.aliyuncs.com/a4ca7c300ca1488ca291b2159f6e303e.jpg" alt="Image 2" style="width: 1400px; height: 300px">
      </el-carousel-item>
      <el-carousel-item>
        <img src="https://2023-08-02first-use-oss.oss-cn-chengdu.aliyuncs.com/4951439309764bb2a334ec869e68c6a6.jpg" alt="Image 3" style="width: 1400px; height: 300px">
      </el-carousel-item>
      <el-carousel-item>
        <img src="https://2023-08-02first-use-oss.oss-cn-chengdu.aliyuncs.com/92ef831c11a949438bcc6fc54387a553.jpg" alt="Image 4" style="width: 1400px; height: 300px">
      </el-carousel-item>
    </el-carousel>
    <div style="display: flex;">
      <div style="height: 210px; width: 50%;margin-right: 10px;border: 2px solid rgba(0,0,0,0.65);">
        <!-- 左边的图 --><bar></bar>
      </div>
      <div style="height: 210px; width: 50%;  margin-left: 10px;border: 2px solid rgba(0,0,0,0.65);">
        <!-- 右边的图 --><lines></lines>
      </div>
    </div>
  </el-card>
</template>
<style scoped>
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
<script setup>
import Bar from "../Visualization/bar.vue";
import Lines from "../Visualization/lines.vue"
</script>
